<template>
	<!-- 主容器，根据isDark状态切换暗黑模式 -->
	<view class="container" :class="{ dark: isDark }">
		<!-- 状态栏 - 显示手机状态信息 -->
		<view class="status-bar"></view>

		<!-- 头部区域 - 包含用户信息和操作按钮 -->
		<view class="header card">
			<view class="user-section">
				<!-- 用户头像 -->
				<view class="avatar">🚗</view>
				<!-- 用户信息 -->
				<view class="user-info">
					<text class="user-name">智能驾驶</text>
					<text class="user-desc">欢迎回来，探索者</text>
				</view>
			</view>
			<!-- 头部操作按钮 -->
			<view class="header-actions">
				<!-- 消息通知按钮 -->
				<view class="action-btn" @click="goToNews">🔔</view>
				<!-- 设置按钮 -->
				<view class="action-btn" @click="showSettings">⚙️</view>
			</view>
		</view>

		<!-- 小车状态卡片 - 显示车辆基本信息 -->
		<view class="car-status card">
			<!-- 车辆头部信息 -->
			<view class="car-header">
				<view>
					<text class="car-name">Explorer-01</text>
					<text class="car-model">Smart Car Pro</text>
				</view>
				<!-- 连接状态 -->
				<view class="connection-status">
					<view class="status-dot"></view>
					<text class="status-text">已连接</text>
				</view>
			</view>
			<!-- 车辆状态统计 -->
			<view class="car-stats">
				<!-- 电量状态 -->
				<view class="stat-item" @click="showBatteryDetail">
					<text class="stat-icon">🔋</text>
					<text class="stat-label">电量</text>
					<text class="stat-value">{{batteryLevel}}%</text>
				</view>
				<!-- 信号状态 -->
				<view class="stat-item" @click="showSignalDetail">
					<text class="stat-icon">📡</text>
					<text class="stat-label">信号</text>
					<text class="stat-value">强</text>
				</view>
				<!-- 温度状态 -->
				<view class="stat-item" @click="showTempDetail">
					<text class="stat-icon">🌡️</text>
					<text class="stat-label">温度</text>
					<text class="stat-value">25°C</text>
				</view>
			</view>
		</view>

		<!-- 设置入口列表 -->
		<view class="settings-list">
			<!-- 历史记录入口 -->
			<view class="setting-item" @click="goToHistory">
				<text class="setting-icon">📋</text>
				<text class="setting-label">历史记录</text>
				<text class="setting-arrow">></text>
			</view>
			<!-- 维护保养入口 -->
			<view class="setting-item" @click="goToMaintenance">
				<text class="setting-icon">🔧</text>
				<text class="setting-label">维护保养</text>
				<text class="setting-arrow">></text>
			</view>
		</view>

		<!-- 底部安全区域 - 适配全面屏 -->
		<view class="bottom-safe-area"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 电池电量百分比，初始值为85%
			batteryLevel: 85,
			// 是否启用暗黑模式，初始为false(明亮模式)
			isDark: false
		}
	},
	
	// 页面显示时执行的生命周期钩子
	onShow() {
		// 从全局应用实例获取暗黑模式设置
		const dark = getApp().globalData.darkMode;
		this.isDark = dark;

		// 根据当前模式设置界面样式
		if (dark) {
			// 暗黑模式下的界面样式配置
			uni.setTabBarStyle({
				backgroundColor: '#1e1e1e',  // 标签栏背景色
				borderStyle: 'black',        // 边框样式
				color: '#999999',            // 未选中标签颜色
				selectedColor: '#ffffff'     // 选中标签颜色
			});
			uni.setNavigationBarColor({
				frontColor: '#ffffff',       // 导航栏前景色(文字)
				backgroundColor: '#1e1e1e'   // 导航栏背景色
			});
		} else {
			// 明亮模式下的界面样式配置
			uni.setTabBarStyle({
				backgroundColor: '#ffffff',
				borderStyle: 'black',
				color: '#7A7E83',
				selectedColor: '#fb7e29'
			});
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#F8F8F8'
			});
		}
	},
	
	methods: {
		// 跳转到新闻页面方法
		goToNews() {
			uni.navigateTo({ url: '/pages/News/News' });
		},
		
		// 显示设置页面方法
		showSettings() {
			uni.navigateTo({ url: '/pages/settings/settings' });
		},
		
		// 显示电池详情弹窗方法
		showBatteryDetail() {
			uni.showModal({
				title: '电池状态',  // 弹窗标题
				content: `当前电量：${this.batteryLevel}%\n预计续航：4小时\n充电状态：未充电`,  // 弹窗内容
				showCancel: false  // 不显示取消按钮
			});
		},
		
		// 显示信号详情弹窗方法
		showSignalDetail() {
			uni.showModal({
				title: '信号状态',
				content: '网络强度：强\n连接类型：WiFi\n延迟：12ms',
				showCancel: false
			});
		},
		
		// 显示温度详情弹窗方法
		showTempDetail() {
			uni.showModal({
				title: '温度监控',
				content: '当前温度：25°C\n工作范围：-10°C~60°C\n状态：正常',
				showCancel: false
			});
		},
		
		// 跳转到历史记录页面方法
		goToHistory() {
			uni.navigateTo({ url: '/pages/history/history' });
		},
		
		// 跳转到维护保养页面方法
		goToMaintenance() {
			uni.navigateTo({ url: '/pages/maintenance/maintenance' });
		}
	}
}
</script>

<style lang="scss">
/* 主容器样式 */
.container {
	min-height: 100vh;  // 最小高度为视口高度
	padding-bottom: env(safe-area-inset-bottom);  // 适配全面屏底部安全区域
	background: linear-gradient(135deg, #f7f7f7 0%, #e8e8e8 100%);  // 渐变背景
	color: #333;  // 默认文字颜色
}

/* 状态栏样式 */
.status-bar {
	height: 44px;  // 固定高度
	background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);  // 渐变背景
}

/* 卡片通用样式 */
.card {
	margin: 32rpx;  // 外边距
	border-radius: 24rpx;  // 圆角
	background: white;  // 背景色
	box-shadow: 0 16rpx 64rpx rgba(0,0,0,0.06);  // 阴影
}

/* 头部区域样式 */
.header {
	padding: 40rpx;  // 内边距
	display: flex;  // 弹性布局
	justify-content: space-between;  // 两端对齐
	align-items: center;  // 垂直居中
}

/* 用户信息区域 */
.user-section {
	display: flex;
	align-items: center;
}

/* 头像样式 */
.avatar {
	width: 96rpx;  // 宽度
	height: 96rpx;  // 高度
	background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);  // 渐变背景
	border-radius: 50%;  // 圆形
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;  // 图标大小
}

/* 用户信息文字区域 */
.user-info {
	display: flex;
	flex-direction: column;  // 垂直排列
}

/* 用户名样式 */
.user-name {
	font-size: 32rpx;
	font-weight: 600;  // 字体粗细
	margin-left: 10rpx;
	color: #333;
}

/* 用户描述样式 */
.user-desc {
	font-size: 24rpx;
	margin-left: 10rpx;
	color: #999;
}

/* 头部操作按钮区域 */
.header-actions {
	display: flex;
	gap: 24rpx;  // 按钮间距
}

/* 操作按钮样式 */
.action-btn {
	width: 70rpx;
	height: 90rpx;
	background: #f8f8f8;  // 背景色
	border-radius: 50%;  // 圆形
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
}

/* 小车状态卡片样式 */
.car-status {
	padding: 48rpx;
}

/* 小车头部区域 */
.car-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

/* 小车名称样式 */
.car-name {
	font-size: 40rpx;
	font-weight: 700;  // 加粗
	color: #333;
}

/* 小车型号样式 */
.car-model {
	font-size: 28rpx;
	color: #666;
}

/* 连接状态区域 */
.connection-status {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

/* 状态指示灯样式 */
.status-dot {
	width: 16rpx;
	height: 16rpx;
	background: #2ed573;  // 绿色表示已连接
	border-radius: 50%;
	animation: blink 2s infinite;  // 闪烁动画
}

/* 闪烁动画定义 */
@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

/* 状态文字样式 */
.status-text {
	font-size: 24rpx;
	color: #2ed573;
	font-weight: 600;
}

/* 小车状态统计区域 */
.car-stats {
	display: grid;  // 网格布局
	grid-template-columns: repeat(3, 1fr);  // 3列等宽
	gap: 32rpx;  // 网格间距
	border-radius: 32rpx;
}

/* 单个状态项样式 */
.stat-item {
	text-align: center;
	padding: 32rpx 24rpx;
	background: #f8f9fa;  // 浅灰色背景
	border-radius: 32rpx;
	
	/* 状态图标样式 */
	.stat-icon {
		font-size: 48rpx;
		margin-bottom: 16rpx;
	}

	/* 状态标签样式 */
	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	/* 状态值样式 */
	.stat-value {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}
}

/* 设置列表区域 */
.settings-list {
	margin: 32rpx 32rpx 0 32rpx;
}

/* 单个设置项样式 */
.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: white;
	border-radius: 24rpx;
	padding: 40rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

	/* 设置图标样式 */
	.setting-icon {
		font-size: 40rpx;
		margin-right: 32rpx;
	}

	/* 设置标签样式 */
	.setting-label {
		flex: 1;  // 占据剩余空间
		font-size: 32rpx;
		color: #333;
	}

	/* 箭头样式 */
	.setting-arrow {
		color: #ccc;
	}
}

/* 底部安全区域样式 */
.bottom-safe-area {
	height: env(safe-area-inset-bottom);  // 使用环境变量适配全面屏
}

/* 暗黑模式样式 */
.dark {
  background: #121212;  // 深色背景
  color: #ccc;  // 浅色文字
}

/* 暗黑模式下的状态栏 */
.dark .status-bar {
  background: linear-gradient(135deg, #444 0%, #222 100%);
}

/* 暗黑模式下的卡片 */
.dark .card {
  background: #1e1e1e;  // 深色卡片背景
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.8);  // 更强的阴影
}

/* 暗黑模式下的文字颜色 */
.dark .user-name,
.dark .stat-value,
.dark .setting-label {
  color: #fff;  // 白色文字
}

/* 暗黑模式下的次要文字颜色 */
.dark .user-desc,
.dark .car-model,
.dark .stat-label {
  color: #aaa;  // 浅灰色文字
}

/* 暗黑模式下的连接状态文字 */
.dark .status-text {
  color: #4caf50;  // 绿色文字
}

/* 暗黑模式下的状态指示灯 */
.dark .status-dot {
  background: #4caf50;  // 绿色指示灯
}

/* 暗黑模式下的设置项 */
.dark .setting-item {
  background: #222;  // 深色背景
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.5);  // 深色阴影
}

/* 暗黑模式下的箭头颜色 */
.dark .setting-arrow {
  color: #888;  // 灰色箭头
}

/* 暗黑模式下的操作按钮 */
.dark .action-btn {
  background: #333;  // 深色背景
  color: #fff;  // 白色图标
}

/* 暗黑模式下的小车名称 */
.dark .car-name {
	color: #ff9800;  // 橙色文字
}

/* 暗黑模式下的状态项 */
.dark .stat-item {
  background: #3c3c3c;  // 比背景浅一点的卡片色
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.6);  // 深色阴影
}

/* 暗黑模式下的状态图标 */
.dark .stat-icon {
  color: #ff9800;  // 图标用暖色调突出，比如橙色
  font-size: 48rpx;
  margin-bottom: 16rpx;
}

/* 暗黑模式下的状态标签 */
.dark .stat-label {
  color: #bbb;  // 浅灰色标签
  font-size: 24rpx;
}

/* 暗黑模式下的状态值 */
.dark .stat-value {
  color: #fff;  // 白色文字
  font-size: 32rpx;
  font-weight: 600;
}
</style>